<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax 封装</title>
</head>
<body>
    <button class="get">GET 请求数据</button>
    <button class="post">post 请求数据</button>
    

    <script>
        // ajax  封装
        // promise 铺垫  
        var getbtn = document.getElementsByClassName("get")[0];
        var postbtn = document.getElementsByClassName("post")[0];
        
        // get请求 
        getbtn.onclick = function(){
            var xhr = new XMLHttpRequest();
            xhr.open("get","../php/isExistUser.php?user=yoyo1",true)
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status ==200){
                    var result = JSON.parse(xhr.responseText);
                    console.log(result)
                }
            }
        }
        
        // post 请求 
        postbtn.onclick = function(){
            var user = "heelo"
            var pass = "aa"

            var xhr = new XMLHttpRequest();
            xhr.open("post","../php/login.php",true)
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(`user=${user}&pass=${pass}`);
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status ==200){
                    var result = JSON.parse(xhr.responseText);
                    console.log(result)
                }
            }
        }
    </script>
</body>
</html>